<template>
	<view>
		<loading v-if="loadShow"></loading>
		<view class="" style="position: relative;">
			<view class="u-flex u-row-center u-col-center u-p-t-50 u-p-b-50">
				<view class="u-flex-col u-row-center u-col-center" v-if="vk.getVuex('$user.userInfo._id')">
					<image :src="vk.getVuex('$user.userInfo.avatar')" style="width: 120rpx;height: 120rpx;border-radius: 120rpx;border: 2px solid #F5F5F5;"></image>
					<view class="u-p-t-10" :style="{color: vk.getVuex('$app.config.color.main')}">{{vk.getVuex('$user.userInfo.nickname')}}</view>
					<view class="u-p-t-10 u-font-12 u-light-color" :style="{color: vk.getVuex('$app.config.color.light')}">当前账号充值，随时随地自助充</view>
				</view>
			</view>
			<view class="" v-if="!vk.getVuex('$setting.client.verify') && vk.getVuex('$setting.base.charge')">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<view class="u-flex u-row-left u-flex-wrap">
						<view class="charge_tab u-m-l-15 u-m-r-15 u-m-t-30 u-flex-col u-row-center u-col-center" 
							:style="{backgroundImage: cheCurrent===index?vk.getVuex('$app.config.bg.button'):'', backgroundColor: cheCurrent===index?'':vk.getVuex('$app.config.bg.tab'), color: cheCurrent===index?vk.getVuex('$app.config.color.button'):vk.getVuex('$app.config.color.main')}" 
							v-for="(item, index) in charge.charge_cont" :key="index"
							@click="cheClick(index)">
							<view class="" style="font-weight: 550;">{{item.score}}{{vk.getVuex('$setting.score.name')}}</view>
							<view class="u-font-13 u-light-color u-p-t-5">{{item.price}}元</view>
						</view>
						<nodata v-if="charge.charge_cont && charge.charge_cont.length === 0" height="30vh" width="690rpx"></nodata>
					</view>
				</view>
				<view class="u-p-t-40 u-p-b-40">
					<u-divider half-width="200" bg-color="rgba(0,0,0,0)" :border-color="vk.getVuex('$app.config.color.light')" :color="vk.getVuex('$app.config.color.light')">支付方式</u-divider>
				</view>
				<view class="u-flex u-row-around u-p-l-30 u-p-r-30">
					<view class="pay_tab u-flex u-row-center" :class="modeCurrent==='wxpay'?'mode_tab':''" :style="{background: vk.getVuex('$app.config.bg.tab')}"
						@click="payModeClick('wxpay')">
						<u-icon name="/static/wxpay.png" size="52"></u-icon>
						<view class="u-p-l-10">
							<view class="" style="font-weight: 550;" :style="{color: vk.getVuex('$app.config.color.main')}">小程序支付</view>
							<!-- <view class="u-font-12 u-light-color">未启用</view> -->
						</view>
						<image v-if="modeCurrent==='wxpay'" src="/static/pay_check.png"
							style="width: 32rpx;height: 32rpx;position: absolute;bottom: 10rpx;right: 10rpx;"></image>
					</view>
				</view>
				<view class="u-p-l-50 u-p-r-50 u-p-t-50">
					<view class="btn" style="text-align: center;" @click="createPayment" :style="{backgroundImage: vk.getVuex('$app.config.bg.button'), color: vk.getVuex('$app.config.color.button')}">复制链接到浏览器打开</view>
				</view>
			</view>
			
			<view class="u-m-t-70 u-m-l-50 u-m-r-50">
				<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				loadShow: true,
				cheCurrent: 0,
				modeCurrent: '',
				charge: {},
				// 表单请求数据
				form1: {
					provider: '',
					total_fee: 0,
					out_trade_no: '',
					subject: '',
					body: '',
					type: 'charge'
				}
			}
		},
		async onLoad(options) {
			that = this;
			await that.getList();
			that.loadShow = false
		},
		methods: {
			async getList(){
				let charge = await that.vk.callFunction({
					url: 'client/wechat/list/pub/findOne',
					data: {
						dbName: 'bus-wx-config',
						whereJson: {
							config_key: 'charge_config'
						}
					},
				})
				if(charge.info) that.charge = charge.info
			},
			// 发起支付
			createPayment() {
				uni.setClipboardData({
					data: that.charge.charge_link+'?userId='+that.vk.getVuex('$user.userInfo.my_invite_code')+'&type=0',
					success: function(res) {
						that.$u.toast('充值链接复制成功，请在浏览器内打开')
					}
				})
			},
			payModeClick(e) {
				if(that.modeCurrent===e){
					that.modeCurrent = ''
					that.form1.provider = ''
				}else{
					that.modeCurrent = e
					that.form1.provider = e
				}
			},
			cheClick(e) {
				that.cheCurrent = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charge_tab {
		width: 200rpx;
		height: 130rpx;
		// background-color: #282828;
		border-radius: 18rpx;
	}

	.check_tab {
		background-image: linear-gradient(to right, #65A0EE, #836AF0);
		color: #FFFFFF;

		.u-tips-color {
			color: #e3e3e3;
		}
	}

	.pay_tab {
		position: relative;
		width: 300rpx;
		height: 130rpx;
		background-color: #282828;
		border-radius: 18rpx;
	}

	.mode_tab {
		border: 1px solid #836AF0;
	}


	.pay-confirm-popup {
		.titles {
			line-height: 46rpx;
			text-align: center;
			padding: 30rpx 0;
			margin-bottom: 30rpx;
		}
	}
	.btn {
		position: relative;
		margin-top: 20rpx;
		color: #ffffff;
		font-weight: 500;
		width: 100%;
		line-height: 90rpx;
		border-radius: 18rpx;
		background-image: linear-gradient(to right, #65A0EE, #836AF0);
	}
</style>
